import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Button } from '@mui/material'
import SelectItem from './component/SelectItem/SelectItem'
import './SelectPractice.less'
import { GetTestCategory } from "@/request/api"
import { useNavigate } from "react-router-dom"
// 传递参数时可以这么写泛型
interface IParams {
  [key: string]: string
}
interface ITestA{
  key:string,
  value:string|number
}
export default function SelectPractice() {
  const navigate = useNavigate()
  let [testTypeValue, setTestTypeValue] = useState<string|number>("all")
  let [testNumValue, settestNumValue] = useState<string|number>(10)
  let [testQuestionType, setQuestionType] = useState<string|number>("all")
  let [testCategory, setCategory] = useState<ITestA[]>([])
  let {actionCode} = useParams<IParams>()
  // console.log(actionCode);
  const testType = [
    { key: "全部", value: "all" },
    { key: "错误", value: "err" },
    { key: "已做", value: "done" },
    { key: "没做", value: "notdone" },
  ]
  interface IMap {
    [key: string]: string
  }
  const testNum = [
    { key: "5", value: 5 },
    { key: "10", value: 10 },
    { key: "20", value: 20 },
    { key: "30", value: 30 },
    { key: "50", value: 50 },
    { key: "100", value: 100 },
  ]
  const CategoryMap:IMap = {
    all: "全部",
    qa: "问答",
    code: "编程",
    one: "单选",
    check: "判断",
    many: "多选",
  }
  const GetCateGory = async () => {
    let res = await GetTestCategory(actionCode!)
    console.log(res);
    let ndata = res.data.map(item=>{
      return { key: `${CategoryMap[item.key]}/${item.value}`, value: item.key }
    })
    setCategory(ndata)
    console.log(res);
    console.log(ndata);
    
  }

  const jump = () => {
    navigate("/practice", {
      state: {
        testNum: testNumValue,
        testType: testTypeValue,
        actionCode,
        questionType: testQuestionType
      }
    })
  }
  useEffect(() => {
    GetCateGory()
  }, [])
  return (
    <div className='select_main'>
      <div className='top'>
        <Button variant='contained' sx={{ background: 'gold' }} onClick={jump}>进入练习模式</Button>
        <Button variant='contained'>进入考试模式(暂未开放)</Button>
      </div>
      <div className='bottom'>
        <SelectItem
          title="试题分类" data={testType} getval={((val)=>{setTestTypeValue(val)
          })}
        ></SelectItem>
        <SelectItem title="题目分类" data={testCategory} getval={((val)=>{setQuestionType(val)
          })}></SelectItem>
        <SelectItem title="做题数量" data={testNum} getval={((val)=>{settestNumValue(val)
          })}></SelectItem>
           <div className='bottom1' onClick={()=>{
        navigate(-1)
      }}>返回上一页</div>
      </div>
    </div>
  )
}
